<template>
  <div class="menu-section">
    <div class="section-header" @click="toggleCollapsed">
      <span class="section-title">输出变量设置</span>
      <a-icon :type="collapsed ? 'down' : 'up'" />
    </div>
    <div v-show="!collapsed" class="menu-items">
      <!-- 开始节点的输出变量配置 -->
      <div v-if="nodeType === 'start'">
        <div class="config-item">
          <div class="start-output-info">
            <a-alert 
              message="开始节点的输出变量与输入变量保持一致" 
              type="info" 
              show-icon 
              size="small"
            />
          </div>
        </div>
      </div>
      
      <!-- HTTP节点的输出变量配置 -->
      <div v-else-if="nodeType === 'HttpV1'">
        <div class="config-item">
          <div class="http-output-info">
            <a-alert 
              message="HTTP节点具有固定的输出变量" 
              type="info" 
              show-icon 
              size="small"
            />
          </div>
        </div>
      </div>
      
      <!-- 普通节点的输出变量配置 -->
      <div v-else>
        <div class="config-item">
          <a-button size="small" @click="addOutputVariable" type="dashed" style="width: 100%">
            <a-icon type="plus" />
            添加输出变量
          </a-button>
        </div>
      </div>
      <div class="config-item" v-if="outputVariables.length > 0">
        <div class="output-variables-table">
          <div class="table-header">
            <div class="header-cell">变量名</div>
            <div class="header-cell">变量类型</div>
            <div class="header-cell">值</div>
            <div class="header-cell">操作</div>
          </div>
          <div 
            v-for="(variable, index) in outputVariables" 
            :key="index" 
            class="table-row"
          >
            <div class="table-cell">
              <a-input
                :value="variable.name"
                placeholder="变量名"
                size="small"
                :disabled="nodeType === 'HttpV1' || nodeType === 'start'"
                @input="onVariableNameChange(index, $event.target.value)"
              />
            </div>
            <div class="table-cell">
              <a-select
                :value="variable.type"
                placeholder="类型"
                size="small"
                :disabled="nodeType === 'HttpV1' || nodeType === 'start' || nodeType === 'end'"
                @change="onVariableTypeChange(index, $event)"
              >
                <a-select-option value="string">字符串</a-select-option>
                <a-select-option value="number">数字</a-select-option>
                <a-select-option value="boolean">布尔值</a-select-option>
                <a-select-option value="object">对象</a-select-option>
                <a-select-option value="array">数组</a-select-option>
              </a-select>
            </div>
            <div class="table-cell">
              <!-- 结束节点的值字段使用下拉选择 -->
              <a-select
                v-if="nodeType === 'end'"
                :value="variable.value"
                placeholder="选择变量"
                size="small"
                @change="onVariableValueChange(index, $event)"
                style="width: 100%"
              >
                <a-select-option value="">无</a-select-option>
                <a-select-option 
                  v-for="option in availableVariables" 
                  :key="option.value"
                  :value="option.value"
                >
                  {{ option.label }}
                </a-select-option>
              </a-select>
              <!-- 其他节点的值字段使用输入框 -->
              <a-input
                v-else
                :value="variable.value"
                placeholder="值"
                size="small"
                :disabled="nodeType === 'HttpV1' || nodeType === 'start'"
                @input="onVariableValueChange(index, $event.target.value)"
              />
            </div>
            <div class="table-cell">
              <a-button 
                v-if="nodeType !== 'HttpV1' && nodeType !== 'start'"
                size="small" 
                type="danger" 
                @click="removeOutputVariable(index)"
                icon="delete"
              />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'OutputVariablesSection',
  props: {
    outputVariables: {
      type: Array,
      default: () => []
    },
    collapsed: {
      type: Boolean,
      default: false
    },
    nodeType: {
      type: String,
      default: ''
    },
    inputVariables: {
      type: Array,
      default: () => []
    },
    availableVariables: {
      type: Array,
      default: () => []
    }
  },
  methods: {
    toggleCollapsed() {
      this.$emit('toggle-collapsed')
    },
    
    onVariableNameChange(index, value) {
      // HTTP节点的输出变量名称不允许修改
      if (this.nodeType === 'HttpV1') {
        return
      }
      const newVariables = [...this.outputVariables]
      newVariables[index] = { ...newVariables[index], name: value }
      this.$emit('update:outputVariables', newVariables)
    },
    
    onVariableTypeChange(index, value) {
      // HTTP节点和结束节点的输出变量类型不允许修改
      if (this.nodeType === 'HttpV1' || this.nodeType === 'end') {
        return
      }
      const newVariables = [...this.outputVariables]
      newVariables[index] = { ...newVariables[index], type: value }
      this.$emit('update:outputVariables', newVariables)
    },
    
    onVariableValueChange(index, value) {
      // HTTP节点的输出变量值不允许修改
      if (this.nodeType === 'HttpV1') {
        return
      }
      
      const newVariables = [...this.outputVariables]
      newVariables[index] = { ...newVariables[index], value: value }
      
      // 如果是结束节点，根据选择的变量自动设置类型
      if (this.nodeType === 'end' && value) {
        const selectedVariable = this.availableVariables.find(v => v.value === value)
        if (selectedVariable) {
          newVariables[index] = { 
            ...newVariables[index], 
            type: selectedVariable.type || 'string' 
          }
        }
      }
      
      this.$emit('update:outputVariables', newVariables)
    },
    
    addOutputVariable() {
      this.$emit('add-output-variable', {
        name: '',
        type: 'string',
        value: ''
      })
    },
    
    removeOutputVariable(index) {
      // HTTP节点的输出变量不允许删除
      if (this.nodeType === 'HttpV1') {
        return
      }
      this.$emit('remove-output-variable', index)
    }
  }
}
</script>

<style scoped>
.menu-section {
  padding: 4px 0;
}

.menu-section:not(:last-child) {
  border-bottom: 1px solid #f0f0f0;
}

.section-title {
  padding: 4px 12px;
  font-size: 11px;
  color: #999;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 12px;
  cursor: pointer;
  background: #fafafa;
  transition: background-color 0.2s;
}

.section-header:hover {
  background: #f0f0f0;
}

.section-header .section-title {
  padding: 0;
  margin: 0;
}

.menu-items {
  padding: 8px 12px;
}

.config-item {
  margin-bottom: 8px;
}

.config-item:last-child {
  margin-bottom: 0;
}

.output-variables-table {
  border: 1px solid #e8e8e8;
  border-radius: 4px;
  overflow: hidden;
}

.table-header {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 60px;
  background: #fafafa;
  border-bottom: 1px solid #e8e8e8;
}

.header-cell {
  padding: 6px 8px;
  font-size: 11px;
  font-weight: 500;
  color: #666;
  text-align: center;
}

.table-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 60px;
  border-bottom: 1px solid #f0f0f0;
}

.table-row:last-child {
  border-bottom: none;
}

.table-cell {
  padding: 4px 8px;
  display: flex;
  align-items: center;
}

.table-cell .ant-input,
.table-cell .ant-select {
  width: 100%;
}

.http-output-info {
  margin-bottom: 8px;
}
</style> 